<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>角色管理</title>
    <meta name="description" content="这是一个 index 页面"/>
    <meta name="keywords" content="index"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="assets/i/favicon.png"/>
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png"/>
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="assets/css/amazeui.css"/>
    <link rel="stylesheet" href="assets/css/admin.css"/>
</head>
<body>
<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
    以获得更好的体验！</p>
<![endif]-->
<!-- content start -->
<div class="admin-content">

    <div class="am-cf am-padding">

    </div>

    <div class="am-g">
        <div class="am-u-sm-12 am-u-md-6">
            <div class="am-btn-toolbar">
                <div class="am-btn-group am-btn-group-xs">
                    <button type="button" class="am-btn am-btn-default" onclick="toAdd()"><span
                            class="am-icon-plus"></span> 新增
                    </button>
                    <button type="button" class="am-btn am-btn-default" onclick="confirmDeleteGroup()">
                        <span class="am-icon-trash-o"></span> 删除
                    </button>
                </div>
            </div>
        </div>
        <div class="am-u-sm-12 am-u-md-3">
            <div class="am-form-group">
                <select data-am-selected="{btnSize: 'sm'}" id="search_menu" onchange="searchRoutes(1)">
                    <option th:each="menu :${menus}" th:value="${menu.id}" th:text="${menu.name}"></option>
                </select>
            </div>
        </div>
        <div class="am-u-sm-12 am-u-md-3">
            <div class="am-input-group am-input-group-sm">
                <input type="text" class="am-form-field" id="routeName" placeholder="路由名称">
                <span class="am-input-group-btn">
            <button class="am-btn am-btn-default" type="button" id="search" onclick="search()">搜索</button>
          </span>
            </div>
        </div>
    </div>

    <div class="am-g" id="content">
        <div class="am-u-sm-12">
            <form class="am-form">
                <table class="am-table am-table-striped am-table-hover table-main">
                    <thead>
                    <tr>
                        <th class="table-check"><input type="checkbox" id="allSelect"/></th>
                        <th class="table-id" style="width: 100px">路由名称</th>
                        <th class="table-name">路由条件</th>
                        <th class="table-role">目标服务</th>
                        <th class="table-filter">过滤器数量</th>
                        <th class="table-set">操作</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
                <div id="pagebar"></div>
            </form>
        </div>

    </div>
</div>
<!-- content end -->
<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script th:src="@{/assets/js/polyfill/rem.min.js}"></script>
<script th:src="@{/assets/js/polyfill/respond.min.js}"></script>
<script th:src="@{/assets/js/amazeui.legacy.js}"></script>
<![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script th:src="@{/assets/js/jquery.min.js}"></script>
<script th:src="@{/assets/js/amazeui.min.js}"></script>
<!--<![endif]-->
<script th:src="@{/static/plugins/layer/layer.js}"></script>
<script th:src="@{/assets/js/app.js}"></script>
<script type="text/javascript" th:src="@{/assets/laypage-1.3.0/laypage.js}"></script>
<script>
    function searchRoutes() {
        var routeName=$("#routeName").val();
        $.ajax({
            type:"GET",
            url:"/fortune/cat/route?routeName="+routeName,
            dataType:"json",
            success: function (data) {
                $("#content").find("tbody").empty();
                var html = '';
                $.each(data['data'], function (commentIndex, comment) {
                    html += '<tr id="tr_route_'+ comment['id'] +'">' +
                        '<td><input type="checkbox" value="'+ comment['id'] +'" name="routeIds"/></td>'
                        + '<td>' + comment['routeId'] + '</td>'
                        + '<td>' + comment['roleName'] + '</td>'
                    var menuHtml = '';
                    var menusLength = comment['menus'].length;
                    for (var i = 0; i < menusLength; i++) {
                        var roleDate = comment['menus'][i];
                        if (i != menusLength-1){
                            menuHtml = menuHtml + roleDate['name'] + " | ";
                        }else {
                            menuHtml = menuHtml + roleDate['name'];
                        }
                    }
                    html = html + '<td>' + menuHtml + '</td>'
                    html += '<td>'
                        + '<div class="am-btn-toolbar">'
                        + '<div class="am-btn-group am-btn-group-xs">'
                        + '<button id="edit" class="am-btn am-btn-default am-btn-xs am-text-secondary" onclick="editRole(' + comment['roleId'] + ');return false"><span class="am-icon-pencil-square-o"></span> 编辑</button>'
                        + '<button id="delete" class="am-btn am-btn-default am-btn-xs am-text-danger" onclick="confirmDelete(' + comment['roleId'] + ');return false"><span class="am-icon-trash-o"></span> 删除</button>'
                        + '</div></div></td>'

                    html += '</tr>'
                });
                $("#content").find("tbody").html(html);

                laypage({
                    cont: 'pagebar',//容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
                    pages: data['totalPages'],//通过后台拿到的总页数
                    skin: '#6665fe',
                    curr: currentPage, //当前页
                    jump: function (obj, first) {//出发分页后的回调
                        if (!first) {//点击跳页触发函数自身，并传递当前页：obj.curr
                            getRoleList(obj.curr);
                        }
                    }
                });
            },
            error: function () {
                layer.msg("获取路由列表失败，请稍后再试")
            }

        })
    }
</script>
</body>
</html>